<template>
	<div class="cart-list-item" v-drag>
		<div class="cart-list-item-container">
			<div class="cart-list-item-check">
				<Checkbox @change="changeItemCheck" v-model="cartItem.checked"/>
			</div>
			<div class="cart-list-item-info">
				<div class="cart-list-item-image">
					<img :src="cartItem.pic" alt="">
				</div>
				<div class="cart-list-item-detail">
					<div class="cart-list-item-detail-name" v-html="cartItem.name"></div>
					<div class="cart-list-item-detail-childsCurGoods">
						<div v-for="item in cartItem.properties" :key="item.id">
							<span>{{item.name}}</span>
							<span v-if="item.childsCurGoods">{{item.childsCurGoods.name}}</span>
						</div>
					</div>
					<div class="cart-list-item-detail-number">
						<div>{{cartItem.price | formatMoney}}</div>
						<div>
							<inputNumber v-model="cartItem.count" :min="1" :max="cartItem.stores" size="small"/>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="cart-list-item-btn">
			<button @click="removeItem(cartItem)">删除</button>
		</div>
	</div>
</template>

<script>
	import {mapActions} from 'vuex';
	import Checkbox from '#/Public/Checkbox';
	import inputNumber from '#/Public/inputNumber';

	export default {
		name: "cart-item",
		props: {
			cartItem: {
				type: Object,
				required: true
			}
		},
		methods: {
			...mapActions(['changeItemCheck', 'removeItem'])
		},
		components: {
			Checkbox,
			inputNumber
		}
	}
</script>
